<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>可乐-Blog 会员中心</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static_resources/favicon.ico}" />
    <link rel="stylesheet" th:href="@{/static_resources/css/nav.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/static_resources/css/vipCenter.css}" type="text/css">
</head>
<body>
<div class="navHeader">
<!--    <div class="lalala">-->
        <div class="navLeft">
            <div class="logo">
                <img th:src="@{/static_resources/img/KeLe.png}" alt="">
                <div class="KeLeWorld">
                    <img th:src="@{/static_resources/img/KeLeWorld.png}" alt="">
                </div>
            </div>
            <ul class="navUl">
                <li class="navLi">
                    <a class="A" th:href="@{/tooIndex}">首页</a>
                </li>
                <li class="navLi">
                    <a class="A" th:href="@{/to/toClassify}">分类</a>
                </li>
                <li class="navLi">
                    <a class="A" th:href="@{/manager/findAllUser}">管理系统</a>
                </li>
            </ul>
        </div>
        <div class="navF11">
            <div class="searchContainer">
                <div class="searchInput">全屏</div>
                <div class="glass">
                    <img th:src="@{/static_resources/img/fullScreen.png}" alt="">
                </div>
            </div>
        </div>
        <div class="navMiddle">
            <div class="searchContainer">
                <a th:href="@{/to/toSearch}" class="searchInput">搜索</a>
                <div class="glass">
                    <img th:src="@{/static_resources/img/fangdajing.png}" alt="">
                </div>
            </div>
        </div>
        <div class="navRight">
            <div class="workCenter">
                <a class="A" th:href="@{/to/toWrite}" target="_blank">
                    创作中心
                </a>
            </div>
            <div class="vip border-B">
                <a class="A">会员中心</a>
            </div>
            <div class="headerPictureContainer">
                <div class="headerPicture headerPictures">

                </div>
                <div class="message">
                    <h3 class="messageName">抓住鼹鼠不撒手</h3><!--后台数据*用户名-->
                    <div class="vipTF">vip</div><!--vip-->
                    <div class="line"></div><!--下划线-->
                    <div class="personalCenterC">
                        <div class="personalCenter">
                            <a class="peopleCenter" th:href="@{/to/toPeopleCenter}">个人中心</a>
                        </div>
                        <div class="personalCenterIco">
                            <img th:src="@{/static_resources/img/icon7.png}" alt="">
                        </div>
                    </div>
                    <div class="personalCenterO">
                        <div class="personalCenter">
                            <a class="peopleCenter" th:href="@{../blogs/findBlogsByBlogger}">内容管理</a>
                        </div>
                        <div class="personalCenterIco">
                            <img id="OtherPicture" th:src="@{/static_resources/img/neirongguanli.png}" alt="">
                        </div>
                    </div>
                    <div class="personalCenterO">
                        <div class="personalCenter">
                            <a class="peopleCenter" th:href="@{/to/toMyCollect}">我的收藏</a>
                        </div>
                        <div class="personalCenterIco">
                            <img th:src="@{/static_resources/img/collection.png}" alt="">
                        </div>
                    </div>
                    <div class="personalCenterO">
                        <div class="personalCenter">
                            <a class="peopleCenter" href="">退出登录</a>
                        </div>
                        <div class="personalCenterIco">
                            <img th:src="@{/static_resources/img/tuichu.png}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!--    </div>-->
</div>
<div class="w pay">
    <h2>会员中心</h2>
    <div class="VipHeader">
        <div class="VipHeaderPicture"></div><!--这里后端传头像-->
        <div class="userName">
            抓住鼹鼠不撒手<!--这里后端传用户名-->
        </div>
        <div class="vipTure"><!--这里判断一下是否是大会员，如果是显示vipTrue如果不是显示vipFalse，由后端传数据-->
            大会员
        </div>
        <div class="vipFalse">
            你还不是大会员
        </div>
        <div class="vipOverdue">
            vip还有1天到期<!--这里后台传数据，判断一下vip还有多少天到期-->
        </div>
    </div>
</div>
<div class="w KCoins">
    <div class="kCoinsIcon">
        K
    </div>
    <div class="myKCoins">
        我的K币
    </div>
    <!--这里是用户K币的数量，由后端传数据-->
    <div class="myCoinsNumber">
        230
    </div>
</div>
<div class="w vipTopUp">
    <div class="CoinsPrice">
        <div class="eightKindPriceC">
            <div class="eightKindPrice">
                <div class="pricePicture">
                    <div class="borderPicture"></div>
                </div>
                <div class="vipDesc">
                    <p>10K币</p>
                </div>
                <div class="KCoinsPrice">
                    0.1元
                </div>
            </div>
            <div class="eightKindPrice">
                <div class="pricePicture">
                    <div class="borderPicture"></div>
                </div>
                <div class="vipDesc">
                    <p>20K币</p>
                </div>
                <div class="KCoinsPrice">
                    0.2元
                </div>
            </div>
            <div class="eightKindPrice">
                <div class="pricePicture">
                    <div class="borderPicture"></div>
                </div>
                <div class="vipDesc">
                    <p>30K币</p>
                </div>
                <div class="KCoinsPrice">
                    0.3元
                </div>
            </div>
            <div class="eightKindPrice">
                <div class="pricePicture">
                    <div class="borderPicture"></div>
                </div>
                <div class="vipDesc">
                    <p>40K币</p>
                </div>
                <div class="KCoinsPrice">
                    0.4元
                </div>
            </div>
        </div>
        <div class="eightKindPriceC">
            <div class="eightKindPrice">
                <div class="pricePicture">
                    <div class="borderPicture"></div>
                </div>
                <div class="vipDesc">
                    <p>100K币</p>
                </div>
                <div class="KCoinsPrice">
                    1.0元
                </div>
            </div>
            <div class="eightKindPrice">
                <div class="pricePicture">
                    <div class="borderPicture"></div>
                </div>
                <div class="vipDesc">
                    <p>1000K币</p>
                </div>
                <div class="KCoinsPrice">
                    3.0元
                </div>
            </div>
            <div class="eightKindPrice">
                <div class="pricePicture">
                    <div class="borderPicture"></div>
                </div>
                <div class="vipDesc">
                    <p>10000K币</p>
                </div>
                <div class="KCoinsPrice">
                    8.0元
                </div>
            </div>
            <div class="eightKindPrice">
                <div class="pricePicture">
                    <div class="borderPicture"></div>
                </div>
                <div class="vipDesc">
                    <p>20000K币</p>
                </div>
                <div class="KCoinsPrice">
                    10.0元
                </div>
            </div>
        </div>
    </div>
    <div class="priceOrCode">
        <div class="AliPayHeader">
            可乐会员中心-你可以通过现金支付来购买K币，使用K币可以兑换大会员，大会员享受自定义个人中心主题色等特权。<br>
            <b>注意：K币只能使用支付宝进行购买</b>
        </div>
        <div class="onclickAliPay">
            <button class="onclickAliPayBtn">支付</button>
        </div>
    </div>
</div>
<div class="w topUpVip">
    <h2>VIP充值</h2>
    <div class="differentTimeVip">
            <div class="differentTimeVipTop">
                1天
            </div>
            <div class="differentTimeVipBottom">
                <span class="VipPrice">10</span><span>K币</span>
            </div>
    </div>
    <div class="differentTimeVip">
            <div class="differentTimeVipTop">
                1周
            </div>
            <div class="differentTimeVipBottom">
                <span class="VipPrice">50</span><span>K币</span>
            </div>
    </div>
    <div class="differentTimeVip">
            <div class="differentTimeVipTop">
                1月
            </div>
            <div class="differentTimeVipBottom">
                <span class="VipPrice">200</span><span>K币</span>
            </div>
    </div>
    <div class="differentTimeVip">
            <div class="differentTimeVipTop">
                1年
            </div>
            <div class="differentTimeVipBottom">
                <span class="VipPrice">2000</span><span>K币</span>
            </div>
    </div>
    <form class="differentTimeVipForm" action="">
        <input class="differentTimeVipBtn" type="button" value="充值大会员">
    </form>
</div>
<script th:src="@{/static_resources/js/vipCenter.js}" type="text/javascript"></script>
<script th:src="@{/static_resources/js/nav.js}" type="text/javascript"></script>
<script th:src="@{/static_resources/js/otherLogin.js}" type="text/javascript"></script>
</body>
</html>